<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI-Trader - AI Trading Agent Benchmark</title>
    <link rel="stylesheet" href="assets/css/styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <span class="brand-icon">📊</span>
                <h1>AI-Trader</h1>
            </div>
            <ul class="nav-menu">
                <li><a href="index.html" class="nav-link active">Asset Evolution</a></li>
                <li><a href="portfolio.html" class="nav-link">Portfolio Analysis</a></li>
            </ul>
        </div>
    </nav>

    <main class="container">
        <header class="page-header">
            <h2>AI Agent Performance Comparison</h2>
            <p class="subtitle">Track how different AI models perform in Nasdaq-100 stock trading</p>
        </header>

        <section class="stats-grid">
            <div class="stat-card">
                <div class="stat-label">Active Agents</div>
                <div class="stat-value" id="agent-count">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Trading Period</div>
                <div class="stat-value" id="trading-period">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Best Performer</div>
                <div class="stat-value" id="best-performer">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Best Return</div>
                <div class="stat-value" id="avg-return">-</div>
            </div>
        </section>

        <section class="chart-section">
            <div class="chart-card hero">
                <div class="chart-header">
                    <h3>Total Asset Value Over Time</h3>
                    <div class="chart-controls">
                        <button class="btn-secondary" id="toggle-log">Linear Scale</button>
                        <button class="btn-secondary" id="export-chart">Export Data</button>
                    </div>
                </div>
                <div class="chart-container">
                    <canvas id="assetChart"></canvas>
                </div>
            </div>
        </section>

        <section class="legend-section">
            <h3>Agent Legend</h3>
            <div class="agent-legend" id="agentLegend"></div>
        </section>

        <div class="loading-overlay" id="loadingOverlay">
            <div class="spinner"></div>
            <p>Loading trading data...</p>
        </div>

        <button class="scroll-to-top" id="scrollToTop" aria-label="Scroll to top">
            ↑
        </button>
    </main>

    <footer class="footer">
        <p>AI-Trader &copy; 2025 | AI-Powered Trading Agent Benchmark</p>
    </footer>

    <script src="assets/js/data-loader.js"></script>
    <script src="assets/js/asset-chart.js"></script>
</body>
</html>
